<template>
	<view class="container">
		<!-- 顶部课程主图 -->
		<image class="course-banner" :src="classDetail.info.thumb" mode="aspectFill"></image>

		<!-- 课程信息 -->
		<view class="course-info">
			<view class="title">{{ classDetail.info.c_name }}</view>
			<view class="brief">上课周期 {{ classDetail.info.week }} | 适合人群： {{ classDetail.info.person }}</view>
			<view class="price">¥ {{ classDetail.info.price }}</view>
			<view class="brief">7*24小时技术支持</view>
			  
			<!-- 授课老师 -->
			<view class="teacher-section">
				<view class="teacher-info" v-for="item in classDetail.teacher">
					<image class="teacher-avatar" :src="item.thumb"></image>
					<view class="name">{{ item.name }}</view>
				</view>
			</view>
	
			<!-- 课程大纲 -->
			<view class="section">
				<view class="section-title">课程大纲</view>
				<view class="section-content">
					<view class="section-list" v-for="item in classDetail.lists">{{ item.p_name }}</view>
				</view>
			</view>

			<!-- 课程介绍 -->
			<view class="section">
				<view class="section-title">课程介绍</view>
				<rich-text v-if="classDetail.info.content" :nodes="classDetail.info.content"></rich-text>
				<view v-if="!classDetail.info.content" class="nodata">暂无课程介绍</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="footer">
			<view class="left">
				<view class="price">¥{{ classDetail.info.price }}</view>
				<view class="count">已报名{{ classDetail.info.people }}人</view>
			</view>
			<view class="right">
				<view class="preview" @click="shiting">
					<image src="/static/audio.png" class="icon"></image>
					<text>试听</text>
				</view>
				<view class="btn" @click="handleApply" v-if="platform != 'ios'">立即报名</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseURL: getApp().globalData.baseUrl,
				classDetail: {},
				platform: ''
			}
		},
		onLoad(options) {
			console.log(options)
			const classId = options.id;
			this.detail(classId);
			var that  =  this
			uni.getSystemInfo({
				success: function (res) {
					console.log(res.platform)
					that.platform = res.platform
				}
			});
		},
		onShow(){ },
		methods: {
			kfInfos(){
				var appid = uni.getStorageSync('appid')
				uni.request({
					url: this.baseURL + '/api/index/getConect',
					method: 'GET',
					data: {appid:appid},
					header: { 'Content-Type': 'application/json' },
					success: (res) => {
						console.log(res.data)
						  this.kfInfo.jw     = res.data.tel
						  this.kfInfo.ts     = res.data.ts
						  this.kfInfo.wechat = res.data.wechat
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				})
			},
			handlePreview() {
				uni.showToast({ title: '试听功能', icon: 'none' })
			},
			handleApply() {
				var isLogin = uni.getStorageSync('isLogin')
				if( isLogin ){
					uni.setStorageSync('class',this.classDetail)
					setTimeout(function(){
						uni.navigateTo({url : '/pages/order/order'})
					},500)
				} else {
					uni.showToast({ title: '请登录！', icon: 'none' });
					setTimeout(function(){
						uni.navigateTo({url : '/pages/login/index'})
					},500)
				}
			},
			detail(classId){
				uni.request({
					url: this.baseURL + '/api/index/course',
					method: 'GET',
					data: {id: classId},
					header: { 'Content-Type': 'application/json' },
					success: (res) => {
						  this.classDetail = res.data.data
						  console.log(this.classDetail.info)
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				})
			},
			shiting(){
				uni.setStorageSync('videoUrl',this.classDetail.info.viedo)
				uni.navigateTo({url: '/pages/video/video'})
			},
		}
	}
</script>

<style>
	.container {background-color: #f8f8f8;padding-bottom: 100rpx;overflow: hidden;}
	.course-banner {width: 100%;height: 350rpx;display: block;}
	.course-info {padding: 30rpx;}
	.title {font-size: 36rpx;font-weight: bold;color: #333;margin-bottom: 10rpx;}
	.brief {font-size: 26rpx;color: #888;margin-bottom: 10rpx;}
	.price {color: #EB6E30;font-size: 40rpx;font-weight: bold;margin-bottom: 10rpx;}
	.teacher-section {display: flex;justify-content: start;margin-bottom: 10rpx;flex-direction: row;padding-top: 10rpx;}
	.teacher-info {display: flex;flex-direction: row;align-items: center;margin-left: 10rpx;}
	.teacher-info:first-child{margin-left: 0;}
	.name {font-size: 26rpx;color: #888;padding-left: 10rpx;}
	.teacher-avatar {width: 60rpx;height: 60rpx;border-radius: 60rpx;}
	.section {background-color: #fff;border-radius: 16rpx;padding: 30rpx;margin-bottom: 30rpx;}
	.section-title {font-size: 32rpx;font-weight: bold;color: #333;margin-bottom: 20rpx;padding-bottom: 20rpx;border-bottom: 1rpx solid #eee;}
	.section-content {font-size: 28rpx;color: #666;line-height: 1.6;}
	.footer {position: fixed;bottom: 0;left: 0;right: 0;height: 100rpx;background: #fff;display: flex;align-items: center;justify-content: space-between;padding: 0 30rpx;box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.05);z-index: 100;display: flex;flex-direction: row;}
	.footer .left {flex: 1;}
	.footer .price {color: #EB6E30;font-size: 36rpx;font-weight: bold;}
	.footer .count {font-size: 24rpx;color: #999;}
	.footer .right {display: flex;align-items: center;flex-direction: row;}
	.preview {display: flex;align-items: center;margin-right: 30rpx;color: #666;}
	.preview text{font-size: 26rpx;}
	.preview .icon {width: 36rpx;height: 36rpx;margin-right: 10rpx;}
	.btn {background: #EB6E30;color: #fff;padding: 20rpx 40rpx;border-radius: 50rpx;font-size: 28rpx;}
	.nodata{width: 100%;text-align: center;font-size: 30rpx;color: #888;}
	.section-list{border-bottom: 1rpx solid #efefef;padding: 20rpx 0 20rpx 0;}
</style>